<template>
	<div>
		<router-link 
			tag="div" 
			to="/" 
			class="header-abs"
			v-show="showAbs"
		>
			<div class="iconfont header-abs-back">&#xe624;</div>
		</router-link>
		<div 
			class="header-fixed" 
			v-show="!showAbs"
			:style="opacityStyle"
		>
			<router-link to="/">
				<div class="header-fixed-left">
					<div class="iconfont header-fixed-back">&#xe624;</div>
				</div>
			</router-link>
			景点详情
		</div>
	</div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
  	return {
  		showAbs:true,
  		opacityStyle: {
  			opacity: 0
  		}
  	}
  },
  methods: {
  	handleScroll () {
  		const top = document.documentElement.scrollTop
		console.log(top)
  		if (top > 60){
  			let opacity = top / 140
  			opacity = opacity > 1 ? 1 : opacity
  			this.opacityStyle = {
  				opacity
  			}
  			this.showAbs=false
  		} else{
  			this.showAbs=true
  		}
  	}
  },
  activated () {
  	window.addEventListener('scroll',this.handleScroll)
  },
  deactivated () {
  	window.removeEventListener('scroll',this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
	.header-abs
		position: absolute
		left: .2rem
		top: .2rem
		width: .8rem
		height: .8rem
		line-height: .8rem 
		border-radius: .4rem
		background: rgba(0,0,0,.8)
		text-align:center
		.header-abs-back
			font-size:.4rem
			color: #fff
	.header-fixed
		z-index:2
		position:fixed
		top:0
		left:0
		bottom:0
		right:0
		height:$headerHeight
		line-height:$headerHeight
		background:$bgColor
		color:#fff
		text-align:center
		font-size:.32rem
		.header-fixed-left
			width:.64rem
			float:left
			.header-fixed-back
				color:#fff
				text-align:center
				font-size:.4rem
				
</style>